<template>
  <div class="box">
    <transition
      @before-enter="beforeEner"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div class="radio" v-if="isShow"></div>
    </transition>
    <button @click="isShow = true" class="btn">加入购物车</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    //transition组件的事件钩子接收的第一个是当前执行动画的元素
    //我们可以在@before-enter事件中进行对元素初始样式的操作
    beforeEner(el) {
      console.log("动画进入之前");
      el.style.transform = "translate(0,0)";
      // debugger;
    },
    //我们可以在@enter事件中对元素进行动画控制
    //enter的事件函数可以接受第二个参数done方法,就是让afterEnter立即触发(正常afterEnter是动画结束之后触发)
    enter(el, done) {
      console.log(1);
      el.offsetWidth; //是个谜？？？？
      el.style.transform = "translate(350px,425px)";
      el.style.transition = "all .2s linear";

      done();
    },
    //我们可以使用@afterEnter事件 对元素进入以后做一些后续操作
    //动画走完才叫真正的进入之后

    afterEnter() {
      // console.log(2);
      ////写法1:因为原始有动画延迟时间,所以消失的时候也等待了时间,我们需要把元素身上的延迟关掉
      // el.style.transition = "none";
      this.isShow = false;
    },
  },
};
</script>

<style>
.box {
  width: 400px;
  height: 500px;
  border: 1px solid #000;
  position: relative;
}

.btn {
  position: absolute;
  width: 100px;
  height: 30px;
  right: 10px;
  bottom: 10px;
}

.radio {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}
</style>
